<template>
  <div>
    <van-tabs v-model="active" animated color="#327BFF">
      <van-tab
        title="全部题库"
        name="1"
        v-if="Jurisdictions.专项练习.模块展示 == '显示' && isjx != '精选题库'"
        v-loading="loading"
        :element-loading-text="loadingText"
      >
        <div class="ZXpecar">
          <div style="background: #fff; padding: 0.75rem">
            <div class="title_ZX">
              <span
                >您可以选择循环模式和普通模式两种出题模式，循环模式可以按顺序进行出题练习，普通模式可以对单选、多选、判断题进行专项练习。</span
              >
            </div>
            <div class="inForBox">
              <span>考生姓名：</span>
              <p>{{ nickname }}</p>
            </div>
            <div class="inForBox">
              <span>准考证号：</span>
              <p>{{ adminUserId }}</p>
            </div>
            <div class="inForBox">
              <span>练习科目：</span>
              <p>{{ subject }}</p>
            </div>
            <!-- <div>
              <p class="FontTitle">练习科目</p>
              <van-radio-group v-model="subjctRadio" class="radioBox">
                <van-radio name="1" icon-size="16px" class="radioTow">单选框 1</van-radio>
                <van-radio name="2" icon-size="16px" class="radioTow">单选框 2</van-radio>
              </van-radio-group>
            </div> -->
            <van-divider class="divder" :hairline="false" />
            <div>
              <p class="FontTitle">出题模式</p>
              <van-radio-group v-model="value2" class="radioBox">
                <van-radio
                  name="2"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="value2 == '2' ? { backgroundColor: '#327bff' } : ''"
                >
                  <template #default>
                    <span :style="value2 == '2' ? { color: '#fff' } : ''"
                      >循环模式</span
                    >
                  </template>
                </van-radio>
                <van-radio
                  name="1"
                  icon-size="16px"
                  class="radioThere"
                  :style="value2 == '1' ? { backgroundColor: '#327bff' } : ''"
                >
                  <template #default>
                    <span :style="value2 == '1' ? { color: '#fff' } : ''"
                      >普通模式</span
                    >
                  </template>
                </van-radio>
              </van-radio-group>
            </div>
            <van-divider />
            <div>
              <p class="FontTitle">练习题型</p>
              <van-radio-group v-model="radio" class="radioBox">
                <van-radio
                  name=""
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  v-if="gz!='大培训'"
                  :style="radio === '' ? { backgroundColor: '#327bff' } : ''"
                >
                  <template #default>
                    <span :style="radio === '' ? { color: '#fff' } : ''"
                      >全部</span
                    >
                  </template>
                </van-radio>
                <van-radio
                  name="单选"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="radio == '单选' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="radio == '单选' ? { color: '#fff' } : ''"
                      >单选</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="判断"
                  icon-size="16px"
                  class="radioThere"
                  :style="radio == '判断' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="radio == '判断' ? { color: '#fff' } : ''"
                      >判断</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="多选"
                  icon-size="16px"
                  class="radioThere"
                  v-if="
                    gz == '特种设备' ||
                    gz == '燃气从业人员培训' ||
                    gz == '现场监护人培训'||gz=='大培训'
                  "
                  :style="radio == '多选' ? { backgroundColor: '#327bff',marginTop: gz=='大培训'?'0':'15px', marginLeft: gz=='大培训'?'15px':'0px',} : ` ${gz=='大培训'?'margin-left:15px;':'margin-top:15px;'}`"
                  ><template #default>
                    <span :style="radio == '多选' ? { color: '#fff' } : ''"
                      >多选</span
                    >
                  </template>
                </van-radio>
              </van-radio-group>
              <div
                v-if="radio == '判断'"
                style="padding: 0 15px; background: #eee; margin-top: 12px"
              >
                <van-checkbox-group
                  v-model="dxtx"
                  direction="horizontal"
                  style="justify-content: space-between"
                >
                  <van-checkbox name="正确" shape="square" icon-size="15px">
                    正确题型
                  </van-checkbox>
                  <van-checkbox name="错误" shape="square" icon-size="15px">
                    错误题型
                  </van-checkbox>
                </van-checkbox-group>
              </div>
              <div
                v-if="radio == '单选'"
                style="padding: 0 15px; background: #eee; margin-top: 12px"
              >
                <van-checkbox-group
                  v-model="dxtx"
                  direction="horizontal"
                  style="justify-content: space-between"
                >
                  <van-checkbox name="A" shape="square" icon-size="15px">
                    选项A
                  </van-checkbox>
                  <van-checkbox name="B" shape="square" icon-size="15px">
                    选项B
                  </van-checkbox>
                  <van-checkbox name="C" shape="square" icon-size="15px">
                    选项C
                  </van-checkbox>
                  <van-checkbox name="D" shape="square" icon-size="15px">
                    选项D
                  </van-checkbox>
                </van-checkbox-group>
              </div>
            </div>
            <!-- <van-divider v-if="radio == '判断'" />
            <div v-if="radio == '判断'">
              <p class="FontTitle">判断题型</p>
              <van-radio-group v-model="pdtx" class="radioBox">
                <van-radio name="全部" icon-size="16px" class="radioThere"
                  >全部题型</van-radio
                >
                <van-radio name="正确" icon-size="16px" class="radioThere"
                  >正确题型</van-radio
                >
                <van-radio name="错误" icon-size="16px" class="radioThere"
                  >错误题型</van-radio
                >
              </van-radio-group>
            </div> -->
            <van-divider />
            <div v-if="isYes">
              <p class="FontTitle">练习类别</p>
              <van-radio-group v-model="value" class="radioBox">
                <van-radio
                  name="新题"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="value == '新题' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="value == '新题' ? { color: '#fff' } : ''"
                      >新题</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="错题"
                  icon-size="16px"
                  class="radioThere"
                  :style="value == '错题' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="value == '错题' ? { color: '#fff' } : ''"
                      >错题</span
                    >
                  </template></van-radio
                >
              </van-radio-group>
            </div>
            <van-divider v-if="isYes" />
            <div>
              <p class="FontTitle">答案提示</p>
              <van-radio-group v-model="daan" class="radioBox">
                <van-radio
                  name="显示"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="daan == '显示' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="daan == '显示' ? { color: '#fff' } : ''"
                      >显示答案</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="不显示"
                  icon-size="16px"
                  class="radioThere"
                  :style="
                    daan == '不显示' ? { backgroundColor: '#327bff' } : ''
                  "
                  ><template #default>
                    <span :style="daan == '不显示' ? { color: '#fff' } : ''"
                      >不显示答案</span
                    >
                  </template></van-radio
                >
              </van-radio-group>
            </div>
            <van-divider v-if="chapterList.length != 0" />
            <van-field
              label="知识点题库"
              v-if="chapterList.length != 0"
              value="请选择知识点"
              readonly
              input-align="right"
              :is-link="true"
              :clickable="false"
              :border="false"
              v-model="zhishidian"
              @click="
                () => {
                  zhishidianshow = true;
                  knowList();
                }
              "
            />
            <van-divider />

            <div class="foot_button">
              <van-button type="info" hairline @click="statrPractice"
                >开始练习</van-button
              >
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="精选题库" name="4" v-if="isShowJX">
        <div
          class="ZXpecar"
          v-loading="loading"
          :element-loading-text="loadingText"
        >
          <div style="background: #fff; padding: 0.75rem">
            <div class="title_ZX">
              <span
                >您可以选择循环模式和普通模式两种出题模式，循环模式可以按顺序进行出题练习，普通模式可以对单选、多选、判断题进行专项练习。</span
              >
            </div>
            <div class="inForBox">
              <span>考生姓名：</span>
              <p>{{ nickname }}</p>
            </div>
            <div class="inForBox">
              <span>准考证号：</span>
              <p>{{ adminUserId }}</p>
            </div>
            <div class="inForBox">
              <span>练习科目：</span>
              <p>{{ subject }}</p>
            </div>
            <!-- <div>
              <p class="FontTitle">练习科目</p>
              <van-radio-group v-model="subjctRadio" class="radioBox">
                <van-radio name="1" icon-size="16px" class="radioTow">单选框 1</van-radio>
                <van-radio name="2" icon-size="16px" class="radioTow">单选框 2</van-radio>
              </van-radio-group>
            </div> -->
            <van-divider />
            <div>
              <p class="FontTitle">出题模式</p>
              <van-radio-group v-model="value2" class="radioBox">
                <van-radio
                  name="2"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="value2 == '2' ? { backgroundColor: '#327bff' } : ''"
                >
                  <template #default>
                    <span :style="value2 == '2' ? { color: '#fff' } : ''"
                      >循环模式</span
                    >
                  </template>
                </van-radio>
                <van-radio
                  name="1"
                  icon-size="16px"
                  class="radioThere"
                  :style="value2 == '1' ? { backgroundColor: '#327bff' } : ''"
                >
                  <template #default>
                    <span :style="value2 == '1' ? { color: '#fff' } : ''"
                      >普通模式</span
                    >
                  </template>
                </van-radio>
              </van-radio-group>
            </div>
            <van-divider />
            <div v-if="isYes">
              <p class="FontTitle">练习题型</p>
              <van-radio-group v-model="radio" class="radioBox">
                <van-radio
                  name=""
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="radio === '' ? { backgroundColor: '#327bff' } : ''"
                >
                  <template #default>
                    <span :style="radio === '' ? { color: '#fff' } : ''"
                      >全部</span
                    >
                  </template>
                </van-radio>
                <van-radio
                  name="单选"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="radio == '单选' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="radio == '单选' ? { color: '#fff' } : ''"
                      >单选</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="判断"
                  icon-size="16px"
                  class="radioThere"
                  :style="radio == '判断' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="radio == '判断' ? { color: '#fff' } : ''"
                      >判断</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="多选"
                  icon-size="16px"
                  class="radioThere"
                  v-if="
                    gz == '特种设备' ||
                    gz == '燃气从业人员培训' ||
                    gz == '现场监护人培训'
                  "
                  style="margin-top: 15px"
                  :style="radio == '多选' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="radio == '多选' ? { color: '#fff' } : ''"
                      >多选</span
                    >
                  </template>
                </van-radio>
              </van-radio-group>
              <div
                v-if="radio == '判断'"
                style="padding: 0 15px; background: #eee; margin-top: 12px"
              >
                <van-checkbox-group
                  v-model="dxtx"
                  direction="horizontal"
                  style="justify-content: space-between"
                >
                  <van-checkbox name="正确" shape="square" icon-size="15px">
                    正确题型
                  </van-checkbox>
                  <van-checkbox name="错误" shape="square" icon-size="15px">
                    错误题型
                  </van-checkbox>
                </van-checkbox-group>
              </div>
              <div
                v-if="radio == '单选'"
                style="padding: 0 15px; background: #eee; margin-top: 12px"
              >
                <van-checkbox-group
                  v-model="dxtx"
                  direction="horizontal"
                  style="justify-content: space-between"
                >
                  <van-checkbox name="A" shape="square" icon-size="15px">
                    选项A
                  </van-checkbox>
                  <van-checkbox name="B" shape="square" icon-size="15px">
                    选项B
                  </van-checkbox>
                  <van-checkbox name="C" shape="square" icon-size="15px">
                    选项C
                  </van-checkbox>
                  <van-checkbox name="D" shape="square" icon-size="15px">
                    选项D
                  </van-checkbox>
                </van-checkbox-group>
              </div>
            </div>
            <van-divider v-if="isYes" />
            <div v-if="isYes">
              <p class="FontTitle">练习类别</p>
              <van-radio-group v-model="value" class="radioBox">
                <van-radio
                  name="新题"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="value == '新题' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="value == '新题' ? { color: '#fff' } : ''"
                      >新题</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="错题"
                  icon-size="16px"
                  class="radioThere"
                  :style="value == '错题' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="value == '错题' ? { color: '#fff' } : ''"
                      >错题</span
                    >
                  </template></van-radio
                >
              </van-radio-group>
            </div>
            <van-divider v-if="isYes" />
            <div>
              <p class="FontTitle">答案提示</p>
              <van-radio-group v-model="daan" class="radioBox">
                <van-radio
                  name="显示"
                  icon-size="16px"
                  class="radioThere"
                  style="margin-right: 15px"
                  :style="daan == '显示' ? { backgroundColor: '#327bff' } : ''"
                  ><template #default>
                    <span :style="daan == '显示' ? { color: '#fff' } : ''"
                      >显示答案</span
                    >
                  </template></van-radio
                >
                <van-radio
                  name="不显示"
                  icon-size="16px"
                  class="radioThere"
                  :style="
                    daan == '不显示' ? { backgroundColor: '#327bff' } : ''
                  "
                  ><template #default>
                    <span :style="daan == '不显示' ? { color: '#fff' } : ''"
                      >不显示答案</span
                    >
                  </template></van-radio
                >
              </van-radio-group>
            </div>
            <van-divider />
            <van-field
              label="知识点题库"
              v-if="chapterList.length != 0"
              value="请选择知识点"
              readonly
              input-align="right"
              :is-link="true"
              :clickable="false"
              :border="false"
              placeholder="请选择"
              @click="
                () => {
                  zhishidianshow = true;
                  knowList();
                }
              "
              v-model="zhishidian"
            />
            <van-divider />
            <!-- <div class='foot_text'>
              <span>练习提示：{{subject}}，共{{total}}道，您已答{{answered}}道。</span>
            </div> -->
            <div class="foot_button">
              <van-button type="info" hairline @click="statrPractice"
                >开始练习</van-button
              >
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab
        title="模拟考试"
        name="2"
        v-if="Jurisdictions.模拟考试.模块展示 == '显示'"
      >
        <div class="MK_root">
          <div class="inForList">
            <div class="img_box">
              <img v-if="headPicture" :src="headPicture" alt="" />
              <img v-else src="@/assets/logo/logo.png" alt="" />
            </div>
            <div class="inForList_box">
              <div class="inForList_title">
                <p>{{ nickname }}</p>
              </div>
              <div class="info_TS">
                <div>
                  <p>考前模拟，快速通过</p>
                </div>
              </div>
              <div>
                <div class="table-infor">
                  <span>考试科目：</span>
                  <p>{{ subject }}</p>
                </div>
                <div class="table-infor" v-if="obj.考试时长">
                  <span>考试标准：</span>
                  <p>
                    {{ obj.考试时长.时长 }}分钟/{{
                      Number(obj.试题分布.单选.数量) +
                      Number(obj.试题分布.多选.数量) +
                      Number(obj.试题分布.判断.数量)
                    }}题
                  </p>
                </div>
                <div class="table-infor" v-if="obj.分值标准">
                  <span>合格标准：</span>
                  <p>
                    {{ obj.分值标准.及格 }}分及格(满分{{
                      Number(obj.试题分布.单选.总分) +
                      Number(obj.试题分布.多选.总分) +
                      Number(obj.试题分布.判断.总分)
                    }}分)
                  </p>
                </div>
                <div>
                  <p class="FontTitle">出题方式：</p>
                  <van-radio-group v-model="form" class="radioBox">
                    <van-radio
                      v-if="obj.人工组卷 && obj.人工组卷 == '开启'"
                      style="margin-right: 15px"
                      :style="
                        form == '人工组卷' ? { backgroundColor: '#327bff' } : ''
                      "
                      name="人工组卷"
                      icon-size="16px"
                      class="radioThere"
                    >
                      <template #default>
                        <span
                          :style="form == '人工组卷' ? { color: '#fff' } : ''"
                          >人工组卷</span
                        >
                      </template>
                    </van-radio>
                    <van-radio
                      name="未答题优先"
                      icon-size="16px"
                      style="margin-right: 15px"
                      :style="
                        form == '未答题优先'
                          ? { backgroundColor: '#327bff' }
                          : ''
                      "
                      class="radioThere"
                      ><template #default>
                        <span
                          :style="form == '未答题优先' ? { color: '#fff' } : ''"
                          >未答题优先</span
                        >
                      </template></van-radio
                    >
                    <van-radio
                      name="随机出题"
                      icon-size="16px"
                      style="margin-right: 15px"
                      :style="
                        form == '随机出题' ? { backgroundColor: '#327bff' } : ''
                      "
                      class="radioThere"
                      ><template #default>
                        <span
                          :style="form == '随机出题' ? { color: '#fff' } : ''"
                          >随机出题</span
                        >
                      </template></van-radio
                    >
                    <van-radio
                      name="错题优先"
                      icon-size="16px"
                      :style="
                        form == '错题优先' ? { backgroundColor: '#327bff' } : ''
                      "
                      class="radioThere"
                      ><template #default>
                        <span
                          :style="form == '错题优先' ? { color: '#fff' } : ''"
                          >错题优先</span
                        >
                      </template></van-radio
                    >
                  </van-radio-group>
                </div>
                <div style="margin-top: 0.75rem" v-if="isMeaxr == '开启'">
                  <p class="FontTitle">答案提示：</p>
                  <van-radio-group v-model="daan" class="radioBox">
                    <van-radio
                      name="显示"
                      icon-size="16px"
                      class="radioThere"
                      style="margin-right: 15px"
                      :style="
                        daan == '显示' ? { backgroundColor: '#327bff' } : ''
                      "
                      ><template #default>
                        <span :style="daan == '显示' ? { color: '#fff' } : ''"
                          >显示答案</span
                        >
                      </template></van-radio
                    >
                    <van-radio
                      name="不显示"
                      icon-size="16px"
                      class="radioThere"
                      :style="
                        daan == '不显示' ? { backgroundColor: '#327bff' } : ''
                      "
                      ><template #default>
                        <span :style="daan == '不显示' ? { color: '#fff' } : ''"
                          >不显示答案</span
                        >
                      </template></van-radio
                    >
                  </van-radio-group>
                </div>
                <div style="margin-top: 0.75rem" v-if="isShowJX">
                  <p class="FontTitle">题库类型：</p>
                  <van-radio-group v-model="pool" class="radioBox">
                    <van-radio
                      name=""
                      icon-size="16px"
                      class="radioThere"
                      style="margin-right: 15px"
                      :style="pool === '' ? { backgroundColor: '#327bff' } : ''"
                      ><template #default>
                        <span :style="pool === '' ? { color: '#fff' } : ''"
                          >全部题库</span
                        >
                      </template></van-radio
                    >
                    <van-radio
                      name="精选题库"
                      icon-size="16px"
                      class="radioThere"
                      :style="
                        pool == '精选题库' ? { backgroundColor: '#327bff' } : ''
                      "
                      ><template #default>
                        <span
                          :style="pool == '精选题库' ? { color: '#fff' } : ''"
                          >精选题库</span
                        >
                      </template></van-radio
                    >
                  </van-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="button_box">
            <van-button round type="info" @click="clickCommit"
              >开始考试</van-button
            >
          </div>
          <div class="button_box">
            <van-button round type="default" @click="clickMyExamList"
              >我的试卷</van-button
            >
          </div>
        </div>
      </van-tab>
      <van-tab
        :title="http.indexOf('yingji') != -1 ? '模拟练习' : '正式考试'"
        name="3"
        v-if="Jurisdictions.正式考试.模块展示 == '显示' && isjx != '精选题库'"
      >
        <div class="MK_root">
          <div class="inForList">
            <div class="img_box">
              <img v-if="headPicture" :src="headPicture" alt="" />
              <img v-else src="@/assets/logo/logo.png" alt="" />
            </div>
            <div class="inForList_box">
              <div class="inForList_title">
                <p>{{ nickname }}</p>
              </div>
              <div class="info_TS">
                <div>
                  <p>稳定心态，沉着答题</p>
                </div>
              </div>
              <div>
                <div class="table-infor">
                  <span>考试科目：</span>
                  <p>{{ subject }}</p>
                </div>
                <div class="table-infor" v-if="obj.考试时长">
                  <span>考试标准：</span>
                  <p>
                    {{ obj.考试时长.时长 }}分钟/{{
                      Number(obj.试题分布.单选.数量) +
                      Number(obj.试题分布.多选.数量) +
                      Number(obj.试题分布.判断.数量)
                    }}题
                  </p>
                </div>
                <div class="table-infor" v-if="obj.分值标准">
                  <span>合格标准：</span>
                  <p>
                    {{ obj.分值标准.及格 }}分及格(满分{{
                      Number(obj.试题分布.单选.总分) +
                      Number(obj.试题分布.多选.总分) +
                      Number(obj.试题分布.判断.总分)
                    }}分)
                  </p>
                </div>
                <div class="table-infor" v-if="obj.分值标准">
                  <span>剩余次数：</span>
                  <p>{{ exam_count_left }} 次</p>
                </div>
                <!-- <div>
                  <p class="FontTitle">出题方式：</p>
                  <van-radio-group v-model="form" class="radioBox">
                    <van-radio name="随机出题" icon-size="16px" class="radioThere">随机出题</van-radio>
                    <van-radio name="错题优先" icon-size="16px" class="radioThere">错题优先</van-radio>
                    <van-radio name="未答题优先" icon-size="16px" class="radioThere">未答题优先</van-radio>
                  </van-radio-group>
                </div>
                <div style="margin-top:0.75rem;">
                  <p class="FontTitle">答案提示：</p>
                  <van-radio-group v-model="daan" class="radioBox">
                    <van-radio name="不显示" icon-size="16px" class="radioThere">不显示答案</van-radio>
                    <van-radio name="显示" icon-size="16px" class="radioThere">显示答案</van-radio>
                  </van-radio-group>
                </div> -->
              </div>
            </div>
          </div>
          <div class="button_box">
            <van-button round type="info" @click="clickCommit"
              >开始考试</van-button
            >
          </div>
          <div class="button_box1">
            <van-button round type="default" @click="clickMyExamzsList"
              >考试成绩：{{ chengji }}分</van-button
            >
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup
      v-model="zhishidianshow"
      round
      position="bottom"
      :style="{ height: '70%' }"
    >
      <!-- <div style="height:50px;display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 0 15px;font-size: 16px;">
        <span style="color:#999;" @click="zhishidianshow=false">取消</span>
        <span style="font-size: 18px;font-weight: 600;">请选择</span>
        <span>确定</span>
      </div>
      <div style="height: calc(100% - 50px);overflow-y: auto;padding: 0 12px;">
        <div v-for="i in 50" style="text-align: center;padding: 12px 0;" :style="i%2==0?{backgroundColor:'#eee'}:''">
          {{ i }}
        </div>
      </div> -->
      <van-picker
        title="请选择"
        show-toolbar
        :columns="chapterList"
        @cancel="zhishidianshow = false"
        value-key="chapter_title"
        @confirm="onConfirm"
      />
      <!-- @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange" -->
    </van-popup>
    <modelExamList ref="modelExamList"></modelExamList>
  </div>
</template>

<script>
import modelExamList from "./modelExamList";
import { mapGetters } from "vuex";
import {
  exerList,
  getSetting,
  mockList,
  examList,
  getAnswered,
  getQcount,
  exammyList,
  userlearn,
  checkScheme,
  chapter,
  evaluationTeacherList,
  evaluationLogList,
} from "@/api/admin.js";
import {
  getsubject_id,
  getsubjectTitle,
  getapplyid,
  setExectSetting,
  getisfacetime,
  getisfacetimezxface,
  getisfacetimemkface,
  getisfacetimezsface,
  delisfacetimezsface,
  delTi,
  getLearnTime,
  getisphoto,
  getAdminToken,
  getAdminUserId,
} from "@/utils/auth.js";
export default {
  computed: {
    ...mapGetters([
      "userinfor",
      "adminUserId",
      "nickname",
      "headPicture",
      "Jurisdictions",
      "initObj",
    ]),
  },
  components: {
    modelExamList,
  },
  data() {
    return {
      title_name: "模拟考试",
      active: "1",
      subjctRadio: "1",
      //专项练习
      value: "循环模式", //练习类别  新题
      radio: "", //练习题型
      pdtx: [], //判断题型
      dxtx: [], //多选题型
      subject: "", //练习科目
      subjectid: "", // 传入后台数据
      daan: "不显示",
      gz: "", //工种
      restart: 0, //是否重新做题  0否 1是
      isYes: false,
      value2: "2", //默认循环出题
      loading: false, //等待
      loadingText: "正在加载...", //loading 文字提示
      applyid: getapplyid(),
      answered: "",
      total: "",
      exam_count_left: "",
      isjx: "", //首页精选题库进入

      http:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
      // 模拟考试   正式考试
      form: "未答题优先",
      obj: {},
      xsNum: 0,
      face: "",
      tiku: "练习题库",
      isShowJX: true,
      isMeaxr: "开启",
      chengji: "",
      pool: "",

      zhishidianshow: false, //知识点弹出层
      chapterList: [], //知识点数据
      zhishidian: "",
      chapter_id: "", //知识点id
    };
  },
  watch: {
    value2(value) {
      this.zhishidian = "";
      this.chapter_id = "";
      if (value == "1") {
        this.isYes = true;
        this.value = "新题";
      } else {
        this.isYes = false;
        this.value = "循环模式";
      }
    },
    active(value) {
      this.zhishidian = "";
      this.chapter_id = "";
      this.value = "循环模式";
      this.daan = "不显示";
      if (value == "2") {
        this.title_name = "模拟考试";
      }
      if (value == "3") {
        this.title_name = "正式考试";
      }
      if (value == "1") {
        this.tiku = "练习题库";
      }
      if (value == "4") {
        this.tiku = "精选题库";
      }
    },
    radio(val) {
      this.pdtx = [];
      this.dxtx = [];
    },
  },
  methods: {
    ajaxs(url, data) {
      let that = this;
      var request = new XMLHttpRequest();
      request.open(
        "POST",
        this.http + url,
        false //false表示同步请求
      );
      request.setRequestHeader("Content-type", "application/json"); //设置为表单方式提交
      request.setRequestHeader("MemberId", getAdminUserId()); //设置为表单方式提交
      request.setRequestHeader("MemberToken", getAdminToken()); //设置为表单方式提交
      request.send(JSON.stringify(data));
      request.onloadend = (res) => {
        const XMLHttp = res.currentTarget;
        if (XMLHttp.readyState === 4 && XMLHttp.status === 200) {
        } else {
          that.$toast.fail("提交失败");
        }
      };
    },
    testExam() {
      let examCommit = localStorage.getItem("examCommit");
      try {
        this.ajaxs(JSON.parse(examCommit).url, JSON.parse(examCommit).examData);
        localStorage.removeItem("examCommit");
      } catch (error) {
        localStorage.removeItem("examCommit");
      }
      // if(examCommit&&examCommit!='undefined'&&examCommit!='null'){
      //   if(Number(JSON.parse(examCommit).DateTime)+1200000<=new Date().getTime()){

      //   }else{
      //     localStorage.removeItem('examCommit')
      //   }
      // }
    },
    statrPractice() {
      if (!this.value) {
        return this.$toast.fail("请选择练习类别");
      }

      this.testExam();
      // if (!this.radio) {
      //   return this.$toast.fail("请选择练习题型");
      // }
      let face = "";
      if (getisfacetime()) {
        face = JSON.parse(getisfacetime()).face;
      } else if (getisfacetimezxface()) {
        face = JSON.parse(getisfacetimezxface()).face;
      }
      let form = {
        subjectid: this.subjectid,
        gz: this.gz,
        qtype: this.radio,
        // pdtx: JSON.parse(JSON.stringify(this.pdtx)).join(),
        answer: JSON.parse(JSON.stringify(this.dxtx)).join(),
        form: JSON.parse(JSON.stringify(this.value)),
        restart: this.restart,
        applyid: this.applyid,
        pool: this.tiku,
        face: face,
      };
      this.loading = true;
      let time = setTimeout(() => {
        this.loadingText = "试题较多,请耐心等待";
      }, 1500);
      if (this.chapter_id) {
        form.chapter_id = this.chapter_id;
        form.form = "知识点模式";
      } else {
        delete form.chapter_id;
        form.form = JSON.parse(JSON.stringify(this.value));
      }

      exerList(form).then((res) => {
        clearTimeout(time);
        this.loading = false;
        if (res.code == 200) {
          if (
            res.data.status == "题库中没有试题" ||
            res.data.status == "没有错题"
          ) {
            this.loading = false;
            this.$toast.fail(res.data.status);
          }
          if (res.data.status == "已做完") {
            this.loading = false;
            this.$dialog
              .confirm({
                title: "提示",
                message: "题库试题已做完，是否重新开始做题",
                showCancelButton: true,
              })
              .then(() => {
                form.restart = 1;
                form.face = getisfacetimezxface()
                  ? JSON.parse(getisfacetimezxface()).face
                  : "";
                this.loading = true;
                exerList(form).then((resA) => {
                  this.loading = false;
                  if (resA.code == 200) {
                    this.$store.commit("SET_TI", resA.data.list);
                    form.restart = 0;
                    this.$router.push(
                      "/exam?exerid=" +
                        resA.data.exerid +
                        "&subjectid=" +
                        this.subjectid +
                        "&daan=" +
                        this.daan +
                        "&form=" +
                        JSON.stringify(form) +
                        "&progress=" +
                        resA.data.progress
                    );
                  }
                });
              });
          }
          if (res.data.status == "正常") {
            this.loading = false;
            form.restart = 0;
            // this.$store.dispatch('questions/commitTi',res.data.list)
            this.$store.commit("SET_TI", res.data.list);

            this.$router.push(
              "/exam?exerid=" +
                res.data.exerid +
                "&subjectid=" +
                this.subjectid +
                "&daan=" +
                this.daan +
                "&form=" +
                JSON.stringify(form) +
                "&progress=" +
                res.data.progress
            );
          }
        } else {
          this.loading = false;
          this.$toast.fail(res.msg);
        }
      });
      // this.$router.push('/exam') examList
    },
    async clickCommit() {
      this.testExam();
      if (this.title_name == "模拟考试") {
        if (
          this.xsNum < 100 &&
          (this.http.indexOf("yingji") != -1 ||
            (this.http.indexOf("shuncheng") != -1 &&
              (this.gz == "特种作业" || this.gz == "安全管理")))
        ) {
          return this.$toast.fail("学时不足，无法参加模拟考试");
        }
        let face = "";
        if (getisfacetimemkface()) {
          face = JSON.parse(getisfacetimemkface()).face;
        } else if (getisfacetime()) {
          face = JSON.parse(getisfacetime()).face;
        }
        if (this.form == "人工组卷") {
          if (
            [
              "特种设备安全管理A",
              "叉车司机N1",
              "工业锅炉司炉G1",
              "锅炉水处理G3",
              "移动式压力容器充装R2",
              "气瓶充装P",
            ].includes(this.subject)
          ) {
            return this.$toast.fail(
              '当前科目中暂无人工组卷试题,请将"出题方式"更改为随机出题或其它选项进行考试'
            );
          }
          this.$refs.modelExamList.open({
            applyid: getapplyid(),
            name: "模拟考试试卷",
            obj: this.obj,
            daan: this.daan,
          });
        } else {
          mockList({
            subjectid: this.subjectid,
            gz: this.gz,
            applyid: getapplyid(),
            face: face,
            form: this.form,
            pool: this.pool,
          }).then((res) => {
            if (res.code == 200) {
              if (res.data.list.length == 0) {
                return this.$toast.fail("当前题库中没有试题~");
              }
              this.$store.commit("SET_TI", res.data.list);
              this.$router.push(
                "/exam?mockid=" +
                  res.data.mockid +
                  "&gz=" +
                  this.gz +
                  "&daan=" +
                  this.daan +
                  "&titleName=" +
                  this.title_name +
                  "&subjectid=" +
                  this.subjectid
              );
            }
          });
        }
      } else {
        if (this.xsNum < 100) {
          return this.$toast.fail("学时不足，无法参加正式考试");
        }
        if (
          (this.http.includes("huacong") && this.gz == "一般工贸") ||
          this.http.includes("企业")
        ) {
          let isYes = false;
          let isYesA = false;
          await evaluationTeacherList({ applyid: getapplyid() }).then((res) => {
            if (res.code == 200 && res.data.list.length != 0) {
              isYes = res.data.list.length >= 2;
            } else {
              isYes = false;
            }
          });
          await evaluationLogList({ applyid: getapplyid() }).then((res) => {
            if (res.code == 200 && res.data.list.length != 0) {
              isYesA = true;
            } else {
              isYesA = false;
            }
          });
          if (!isYes || !isYesA) {
            return this.$toast.fail("请进行教学评价后参加考试!");
          }
        }
        let face = "";
        // if (getisfacetime()) {
        //   face = JSON.parse(getisfacetime()).face;
        // } else
        if (getisfacetimezsface()) {
          face = JSON.parse(getisfacetimezsface()).face;
        }
        if (this.obj.人工组卷 && this.obj.人工组卷 == "开启") {
          this.$refs.modelExamList.open({
            applyid: getapplyid(),
            name: "正式考试试卷",
            obj: this.obj,
            daan: "不显示",
          });
        } else {
          if (
            getisphoto() &&
            getisphoto() != "undefined" &&
            JSON.parse(getisphoto()).zsface == "开启"
          ) {
            if (getisfacetimezsface()) {
              examList({
                subjectid: this.subjectid,
                gz: this.gz,
                applyid: getapplyid(),
                face: face,
              }).then((res) => {
                if (res.code == 200) {
                  this.$store.commit("SET_TI", res.data.list);
                  let examTime = res.data.scheme_during
                    ? res.data.scheme_during
                    : "";
                  this.$router
                    .push(
                      "/exam?examid=" +
                        res.data.examid +
                        "&gz=" +
                        this.gz +
                        "&daan=" +
                        this.daan +
                        "&titleName=" +
                        this.title_name +
                        "&subjectid=" +
                        this.subjectid +
                        "&examTime=" +
                        examTime
                    )
                    .then(() => {
                      delisfacetimezsface();
                    });
                }
              });
            } else {
              checkScheme({
                applyid: getapplyid(),
                subjectid: this.subjectid,
                gz: this.gz,
              }).then((res) => {
                if (res.code == 200) {
                  this.$router.replace("/exam?titleName=" + this.title_name);
                } else {
                  this.$toast.fail(res.msg);
                }
              });
            }
          } else {
            examList({
              subjectid: this.subjectid,
              gz: this.gz,
              applyid: getapplyid(),
              face: face,
            }).then((res) => {
              if (res.code == 200) {
                this.$store.commit("SET_TI", res.data.list);
                let examTime = res.data.scheme_during
                  ? res.data.scheme_during
                  : "";
                this.$router
                  .push(
                    "/exam?examid=" +
                      res.data.examid +
                      "&gz=" +
                      this.gz +
                      "&daan=" +
                      this.daan +
                      "&titleName=" +
                      this.title_name +
                      "&subjectid=" +
                      this.subjectid +
                      "&examTime=" +
                      examTime
                  )
                  .then(() => {
                    delisfacetimezsface();
                  });
              }
            });
          }
        }
      }
    },
    async getInfo() {
      await getSetting({ subjectid: this.subjectid, gz: this.gz }).then(
        (res) => {
          if (res.code == 200) {
            let arr = ["初级", "中级", "高级", "技师"];
            if (
              this.gz == "职业技能等级认定" &&
              (this.http.indexOf("qdjsxy") != -1 ||
                this.http.indexOf("qiye") != -1 ||
                this.http.indexOf("testtjy") != -1)
            ) {
              arr.map((item) => {
                if (getsubjectTitle().indexOf(item) != -1) {
                  this.obj = res.data[this.title_name][item];
                }
              });
            } else {
              this.obj = res.data[this.title_name];
            }

            setExectSetting(
              Object.assign(this.obj, { 考试类型: this.title_name })
            );
            this.form =
              this.obj.人工组卷 && this.obj.人工组卷 == "开启"
                ? "人工组卷"
                : "未答题优先";
          }
        }
      );
    },
    //我的试卷
    clickMyExamList() {
      this.$router.push("/MyExam");
    },
    //我的试卷 正式
    clickMyExamzsList() {
      this.$router.push("/MyExamzs");
    },
    //知识点
    knowList() {
      this.chapterList = [];
      // this.chapterList.titles=[]
      chapter({
        subject_id: this.subjectid,
        limit: 30,
      }).then((res) => {
        if (res.code == 200) {
          this.chapterList = res.data.list;
          if (this.chapterList.length != 0) {
            this.chapterList.unshift({
              id: "",
              chapter_title: "清空选择",
            });
          }
        }
      });
    },
    onConfirm(data) {
      this.zhishidianshow = false;
      // console.log(data,'888');
      this.chapter_id = data.id;
      if (data.chapter_title == "清空选择") {
        this.zhishidian = "";
      } else {
        this.zhishidian = data.chapter_title;
      }
    },
  },
  created() {
    delTi();
    this.isMeaxr = JSON.parse(this.initObj.setting).mkExam
      ? JSON.parse(this.initObj.setting).mkExam
      : "开启";
    this.$store.commit("DEL_TI");
    this.subject = getsubjectTitle();
    this.subjectid = getsubject_id();
    this.gz = this.userinfor.filter(
      (item) => item.subject_id == getsubject_id()
    )[0].gz;
    this.xsNum = getLearnTime();
    // this.active =
    //   this.$route.query.titleName && this.$route.query.titleName != "undefined"
    //     ? this.$route.query.titleName == "模拟考试"
    //       ? "2"
    //       : "3"
    //     : "1"

    this.getInfo();
    getAnswered({ subjectid: this.subjectid, applyid: getapplyid() }).then(
      (res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.answered = res.data.answered;
        }
      }
    );
    getQcount({
      subjectid: this.subjectid,
      pool: "精选题库",
      applyid: getapplyid(),
    }).then((res) => {
      if (res.code == 200) {
        this.isjx = "";
        if (res.data.count > 0) {
          this.isShowJX = true;
        } else {
          this.isShowJX = false;
        }
        if (
          this.$route.query.titleName &&
          this.$route.query.titleName != "undefined"
        ) {
          if (this.$route.query.titleName == "模拟考试") {
            this.active = "2";
          }
          if (this.$route.query.titleName == "正式考试") {
            this.active = "3";
          }
        }
        if (this.$route.query.isjx && this.$route.query.isjx != "undefined") {
          if (this.$route.query.isjx == "精选题库") {
            this.active = "4";
            this.pool = "精选题库";
            this.isjx = this.$route.query.isjx;
          }
        }
      }
    });
    exammyList({ applyid: getapplyid() }).then((res) => {
      if (res.code == 200) {
        // this.list = res.data.list;  chengji
        // res.data.list.filter(item=>{
        //   return item.score
        // })
        if (res.data.list.length == 0) {
          return;
        }
        this.chengji = JSON.parse(JSON.stringify(res.data.list)).sort(
          (a, b) => {
            return b.score - a.score;
          }
        )[0].score;
      }
    });
    userlearn({ applyid: this.applyid }).then((res) => {
      if (res.code == 200) {
        this.exam_count_left = res.data.exam_count_left;
      }
    });
    if(this.gz=='大培训'){
      this.radio = '单选'
    }
    this.knowList();
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-tabs--line .van-tabs__wrap {
    height: 50px;
  }

  .van-tabs__line {
    width: 30px;
    border-radius: 10px;
  }

  .van-tab__text {
    font-size: 0.87rem;
  }

  .van-tab--active {
    .van-tab__text {
      color: #327bff;
      font-weight: 600;
      font-size: 1rem;
    }
  }

  // .van-radio__label {
  //   font-size: 0.75rem;
  // }
}

.ZXpecar {
  padding: 0.75rem;
  padding-bottom: 0;
  height: calc(100vh - 106px);
  border-radius: 6px;
  overflow: auto;

  .title_ZX {
    padding: 0.75rem;
    background: #eaf9ff;
    border-radius: 4px;

    span {
      color: #24aaf0;
      font-size: 0.81rem;
    }
  }

  .inForBox {
    padding-top: 0.75rem;
    display: flex;

    p {
      margin: 0;
      font-weight: 600;
      font-size: 1rem;
    }

    span {
      font-size: 1rem;
      color: #999;
    }
  }

  .foot_text {
    background: #fef3f1;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1.25rem;

    span {
      color: #f33e34;
      font-size: 0.81rem;
    }
  }

  .van-hairline--surround::after {
    border-width: 0;
  }

  .van-button {
    border-radius: 4px;
  }

  .foot_button {
    display: flex;
    justify-content: center;

    .van-button--normal {
      padding: 0 2.44rem;
    }
  }
}

.MK_root {
  background: #eaf9ff;
  padding: 3.125rem 1.125rem;
  height: calc(100vh - 100px);
  overflow: auto;
  padding-bottom: 0;

  .inForList {
    background: #fff;
    border-radius: 6px;
    position: relative;

    .img_box {
      width: 100%;
      height: 3.31rem;
      display: flex;
      justify-content: center;
      position: absolute;
      top: -1.65rem;

      img {
        border-radius: 50%;
        height: 100%;
      }
    }

    .inForList_box {
      padding: 0 1.25rem;
      padding-top: 1.65rem;
      padding-bottom: 1.25rem;

      .inForList_title {
        margin-top: 6px;
        display: flex;
        justify-content: center;

        p {
          margin: 0;
          padding: 0.75rem 0;
          font-size: 16px;
          font-weight: 600;
        }
      }

      .info_TS {
        display: flex;
        justify-content: center;
        margin-bottom: 1.25rem;

        div {
          width: 10.8rem;
          height: 1.56rem;
          border-radius: 0.81rem;
          background: #eaf7ed;
          line-height: 1.56rem;

          p {
            margin: 0;
            color: #1dc7a3;
            text-align: center;
          }
        }
      }

      .table-infor {
        display: flex;
        margin-bottom: 0.75rem;

        span {
          font-weight: 600;
          font-size: 1rem;
        }

        p {
          margin: 0;
          color: #666;
          font-size: 1rem;
        }
      }
    }
  }

  .button_box {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;

    .van-button--normal {
      padding: 0 7.09rem;
    }
  }

  .button_box1 {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;

    .van-button--normal {
      padding: 0 5.8rem;
    }
  }
}

.radioBox {
  display: flex;
  flex-wrap: wrap;

  .radioTow {
    width: 50%;
  }

  .radioThere {
    width: 28%;
    padding: 8px 0;
    background-color: #eee;
    border-radius: 20px;
  }

  .radioFour {
    width: 25%;
  }
}

.FontTitle {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 8px;
}

::v-deep {
  .van-checkbox {
    width: 45%;
    padding: 8px 12px;
    background-color: #fff;
    margin: 10px 0;
    // border-radius: 20px;
  }

  .van-radio__icon {
    display: none;
  }

  .van-radio__label {
    display: flex;
    width: 100%;
    margin: 0;
    justify-content: center;
  }

  .van-cell {
    .van-cell__title {
      font-weight: 600;
      font-size: 1rem;
    }

    .van-field__body {
      input {
        font-size: 14px;
      }
    }
  }
}

// .divder::before{
//   border-width: 12px;
// }
</style>